<template>
	<view class="home-monitor">
		<view class="home-monitor-head">
			<u-section title="设备基本信息" font-size="32" :showLine="false" :right="true" :bold="false">
				<view slot="right" @click="setVolume">
					<u-icon name="volume-up-fill" label="音量调节" label-size="24" color="#FF0000"></u-icon>
				</view>
			</u-section>
		</view>
		<view class="home-monitor-body">
			<!-- mod -->
			<view class="monitor-mod">
				<view class="monitor-view">
					<view class="monitor-cell">
						<view class="monitor-item">
							<view class="item-head">
								<view class="item-progress">
									<u-circle-progress active-color="#1798f6" :percent="device.water_percent" width="68" border-width="6">
										<view class="item-progress-content">
											<text class='item-progress-num'>{{device.water_percent}}</text>
											<text class="item-progress-unit">%</text>
										</view>
									</u-circle-progress>
								</view>
							</view>
							<view class="item-body">
								<view class="item-lab">
									<text>制水量</text><text class="text-blue">/{{device.water_percent}}%</text>
								</view>
							</view>
						</view>
					</view>
					<view class="monitor-cell">
						<view class="monitor-item">
							<view class="item-head">
								<view class="item-icon icon-bg-orange" >
									<u-icon name="yali" custom-prefix="xin-icon" ></u-icon>
								</view>
							</view>
							<view class="item-body">
								<view class="item-lab">
									<text>压力桶</text><text class="text-orange">/{{device.ml_status}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="monitor-cell">
						<view class="monitor-item">
							<view class="item-head">
								<view class="item-icon icon-bg-red" >
									<u-icon name="tingshui" custom-prefix="xin-icon"></u-icon>
								</view>
							</view>
							<view class="item-body">
								<view class="item-lab">
									<text>管路状态</text><text class="text-red">/{{device.pipe_status}}</text>
								</view>
							</view>
						</view>
					</view>
					
				</view>
			</view> 
			<!-- /mod -->
			<!-- mod -->
			<view class="temperature-mod">
				<view class="mod-head">
					<text class="u-m-r-16">当前用水水温</text>
					<text>{{device.water_temperature}}℃</text>
				</view>
				<view class="mod-body">
					<temperature-bar :tempNumber="device.water_temperature"></temperature-bar>
				</view>
			</view>
			<!-- /mod -->
			<!-- mod -->
			<view class="filterele-mod">
				<view class="filterele-view">
					<view class="filterele-cell">
						<view class="filterele-item">
							<view class="item-cover">
								<view class="item-tit">PP棉</view>
								<view class="item-box">
									<view class="item-progress">
										<u-line-progress :percent="10" height="20" :show-percent="false" active-color="#71d5a1" inactive-color="#dbf1e1" ></u-line-progress>
									</view>
								</view>
								<view class="item-lab">{{device.pp_lastdays}}天</view>
							</view>
						</view>
					</view>
					<view class="filterele-cell">
						<view class="filterele-item">
							<view class="item-cover">
								<view class="item-tit">UDF</view>
								<view class="item-box">
									<view class="item-progress">
										<u-line-progress :percent="20" height="20" :show-percent="false" active-color="#63a0ff" inactive-color="#e8f1ff" ></u-line-progress>
									</view>
								</view>
								<view class="item-lab">{{device.udf_lastdays}}天</view>
							</view>
						</view>
					</view>
					<view class="filterele-cell">
						<view class="filterele-item">
							<view class="item-cover">
								<view class="item-tit">OTC</view>
								<view class="item-box">
									<view class="item-progress">
										<u-line-progress :percent="30" height="20" :show-percent="false" active-color="#428cff" inactive-color="#e8f1ff" ></u-line-progress>
									</view>
								</view>
								<view class="item-lab">{{device.otc_lastdays}}天</view>
							</view>
						</view>
					</view>
					<view class="filterele-cell">
						<view class="filterele-item">
							<view class="item-cover">
								<view class="item-tit">RO膜</view>
								<view class="item-box">
									<view class="item-progress">
										<u-line-progress :percent="30" height="20" :show-percent="false" active-color="#00e6c3" inactive-color="#d4fbf5" ></u-line-progress>
									</view>
								</view>
								<view class="item-lab">{{device.ro_lastdays}}天</view>
							</view>
						</view>
					</view>
					<view class="filterele-cell">
						<view class="filterele-item">
							<view class="item-cover">
								<view class="item-tit">T33</view>
								<view class="item-box">
									<view class="item-progress">
										<u-line-progress :percent="30" height="20" :show-percent="false" active-color="#fdaf51" inactive-color="#ffddb1" ></u-line-progress>
									</view>
								</view>
								<view class="item-lab">{{device.t33_lastdays}}天</view>
							</view>
						</view>
					</view>
					<view class="filterele-cell">
						<view class="filterele-item">
							<view class="item-cover">
								<view class="item-tit">矿化膜</view>
								<view class="item-box">
									<view class="item-progress">
										<u-line-progress :percent="20" height="20" :show-percent="false" active-color="#afb507" inactive-color="#e6e8a6" ></u-line-progress>
									</view>
								</view>
								<view class="item-lab">{{device.kh_lastdays}}天</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- /mod -->
		</view>
	</view>
</template>

<script>
	import TemperatureBar from './temperature-bar.vue';
	export default {
	components: {
		TemperatureBar,
	},
	data() {
		return {
		 
		};
	},
	props: {
		device:{
			type:Object,
			default:function(){
				return {};
			}
		}
	},
	computed: {
		
	},
	created() {
		 
	},
	methods: {
		jump(data) {
			this.$tools.routerTo(data.path);
		},
		setVolume(){
			console.log("!!!");
			this.$emit("setVoice");
		}
	}
};
</script>

<style lang="scss" scoped>
	.home-monitor{
		margin:36upx 24upx;
		margin-bottom:16upx;
		.home-monitor-head{
			margin-bottom: 24upx;
		}
		.home-monitor-body{
			
		}
	}
	
	.monitor-mod{
		line-height: 1.2;
		margin-bottom: 26upx;
	}
	.monitor-view{
		display: flex;
		flex-wrap: wrap;
		margin-left: -24upx;
		margin-top: -24upx;
	}
	.monitor-cell{
		width: 33.33%;
		padding-top: 24upx;
		padding-left: 24upx;
	}
	.monitor-item{
		padding: 24upx 30upx;
		box-shadow: -1upx 2upx 20upx 0 rgba(6, 0, 1, 0.06);
		border-radius: 20upx;
		background-color: #fff;
		.item-head{
			height: 68upx;
		}
		.item-body{
			margin-top: 16upx;
		}
		.item-progress{
			
		}
		.item-progress-content{
			font-size: 24upx;
			transform: scale(.8);
		}
		.item-progress-num{
			
		}
		.item-progress-unit{
			font-size: 20upx;
		}
		.item-icon{
			width: 68upx;
			height: 68upx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #eff5fe;
			border-radius: 100%;
			font-size: 40upx;
			&.icon-bg-blue{
				color: #428cff;
				background-color: #eff5fe;
			}
			&.icon-bg-yellow{
				color: #f7b702;
				background-color: #fff8e4;
			}
			&.icon-bg-orange{
				color: #ff7f4e;
				background-color: #fff4ef;
			}
			&.icon-bg-red{
				color: #fe3b3b;
				background-color: #fff1f1;
			}
			&.icon-bg-green{
				color: #31d3b9;
				background-color: #effbf9;
			}
		}
		.item-lab{
			font-size: 24upx;
			margin-bottom: 4upx;
		}
		.text-blue{
			color: #428cff;
		}
		.text-yellow{
			color: #f7b702;
		}
		.text-orange{
			color: #ff7f4e;
		}
		.text-red{
			color: #fe3b3b;
		} 
		.text-green{
			color: #31d3b9;
		}
	}
	
	
	.temperature-mod{
		padding: 32upx 30upx;
		box-shadow: -1upx 2upx 20upx 0 rgba(6, 0, 1, 0.06);
		border-radius: 20upx;
		background-color: #fff;
		font-size: 28upx;
		color: #3d3d3d;
		line-height: 1.2;
		margin-bottom:28upx;
		.mod-head{
			margin-bottom: 32upx;
		}
		.mod-body{
			
		}
	}
	.filterele-mod{
		line-height: 1.2;
	}
	.filterele-view{
		display: flex;
		justify-content: space-between;
		margin-left: -10upx;
		margin-right: -10upx;
	}
	.filterele-cell{
		flex: none;
	}
	.filterele-item{
		width: 120upx;
		height: 344upx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #f1f1f1;
		background: url('/static/images/filterele-img.png') no-repeat 0 0/100% 100%;
		
		.item-cover{
			width: 100upx;
			text-align: center;
		}
		.item-tit{
			font-size: 28upx;
			margin-bottom: 12upx;
			
		}
		.item-lab{
			margin-top: 12upx;
			font-size: 26upx;
		}
		.item-box{
			position: relative;
			line-height: 1;
			height: 160upx;
			width: 20upx;
			margin-left: auto;
			margin-right: auto;
		}
		.item-progress{
			position: absolute;
			left: 20upx;
			top: 0;
			width: 160upx;
			height: 20upx;
			transform: rotate(90deg);
			transform-origin: 0 0;
		}
	}
</style>
